<template>
  <div class="group-pushing">
    <div class="process">
      <div class="disp">
        <span class="radius">拼</span>
        <span class="text">开启拼课</span>
        <span class="iconfont icon-jiantou"></span>
        <span class="iconfont icon-gerenrenzheng"></span>
        <span class="text">
          用户参与
          <br>
          等待成团
        </span>
        <div class="popoline"></div>
        <span class="ovline"></span>
        <div class="obob">
          <span class="iconfont icon-jiantou"></span>
          <span class="iconfont icon-jiantou"></span>
        </div>
        <div class="icon-box">
          <icon
            type="success"
            class="success"
          ></icon>
          <icon
            type="clear"
            class="clear"
          ></icon>
        </div>
        <span class="text1">
          满足成团人数听课
          <br>
          未成团退款
        </span>
      </div>
    </div>
    <!-- <assemblelist></assemblelist> -->
    <!-- <div class="box-line"></div> -->
    <div class="ing-box">
      <div class="bar-bar">
        <p class="ing-title">
          <span class="iconfont icon-zhengzaijinhang"></span>
          <span v-if="is_list === 'on'">拼团成功</span>
          <span v-if="is_list === 'ing'">正在拼课</span>
          <span v-if="is_list === 'off'">拼课失败</span>
        </p>

        <!-- {{ '正在拼课' : '拼客成功'}}  -->
        <div class="bybars">
          <span :style="`width:${percent1}px`"></span>
        </div>
        <p class="pepe">{{baifenbi}}人</p>
      </div>
    </div>
    <div class="time-box" v-if="is_list === 'ing'">
      剩余时间：
      <span>{{hour}}</span>
      &nbsp;:&nbsp;
      <span>{{minute}}</span>
      &nbsp;:&nbsp;
      <span>{{second}}</span>
    </div>
    <!-- <div class="box-line"></div> -->
    <div class="details">
      <div class="details-title">
        <div>拼课详情</div>
        <div>拼课成功才可进入听课,失败则原路退款至账户中</div>
      </div>
    </div>
    <div class="list-box-bobo"  v-if="parent !== '' && arrlist.length>0">
      <div class="list-container"  v-for="(item,index) in arrlist" :key="index">
        <div class="list-content">
          <div class="list-avatar">
            <div class="avatar" :style="`backgroundImage:url(${item.cover})`"></div>
          </div>
          <div class="list-text">
            <div class="who-name">
              <div class="nonon">
                <span>团长</span>
                <span>{{item.nick_name}}的团</span>
              </div>
              <div class="date">
                <span>{{item.create_time}}</span>
                <span>开团</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="list-container"  v-for="item in arrlistdel" :key="item.nick_name" >
        <div class="list-content">
          <div class="list-avatar">
            <div class="avatar" :style="`backgroundImage:url(${item.cover})`"></div>
          </div>
          <div class="list-text">
            <div class="who-name">
              <div class="nonon">
                <span>团员</span>
                <span>{{item.nick_name}}</span>
              </div>
              <div class="date">
                <span>{{item.create_time}}</span>
                <span>拼团</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="box-line"></div> -->
    <div class="classjieshao">
      课程介绍
    </div>
    <div v-html="curriculum.introduction" class="htmlcontent"></div>
    <div class="paddd">
      <!-- <div class="brief-introduction">简介</div>
      <div class="brief-content">暂无简介</div> -->
      <div class="buy">购买须知</div>
      <div class="buy-notice">
        <p>1、该课程为付费课程，按课程计划定期更新，每节课程可在开
          课时学习，也可反复回听</p>
        <p>2、够买课程后关注知运公众号，可在菜单【已购买课程】里进
          入听课</p>
        <p>3、该课程为虚拟内容服务，购买成功后概不退款，敬请谅解</p>
      </div>
      <div
        class="buy"
        style="margin-top:0px;"
      >拼课须知</div>
      <div class="buy-notice">
        <p>1、开团或购买拼课</p>
        <p>2、分享拼课给好友</p>
        <p>3、进入听课</p>
      </div>
    </div>
    <div class="box-line"></div>
    <div class="buton">
      <div class="btn-text"  @click="yaoqing" v-if="parent !== '' && is_list === 'ing'">邀请好友来听课（赚¥{{parent.class.fenyong}}）</div>
      <div class="btn-text"  v-if="parent !== '' && is_list === 'on'" @click="gobook">进入课程</div>
    </div>
      <!--  遮罩-->
    <div
      class="marsk"
      @click="hide"
      v-if="marskStatus && parent !== '' && is_list === 'ing'"
    >
      <p >还差<span>1</span>人，赶快邀请好友来参加吧</p>
      <p>剩余时间<span>{{time}}</span>结束</p>
      <div>
        <section>
          <section>知己难遇，好课难求</section>
          <section>分享邀请拼课赚&nbsp;<span style="color:#DA4131;">{{parent.class.fenyong}}</span></section>
        </section>
        <!-- <span></span> -->
      </div>
    </div>
    <!-- <span class="iconfont icon-zhengzaijinhang"></span> -->
    <!-- <span class="iconfont icon-close"></span> -->
  </div>
</template>

<script>
import wxReady from '@/utils/wxReady'
import { Icon, XProgress } from 'vux'
import assemblelist from '@/components/assemble/assemblelist'
import {clickSuccess} from '@/api/assemble'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      baifenbi: '',
      curriculum: '',
      is_list: '',
      percent1: '',
      marskStatus: true,
      time: '12:00:00',
      hour: '',
      minute: '',
      second: '',
      parent: '',
      arrlist: '',
      arrlistdel: ''
    }
  },
  created () {
    //     console.log(111111222222)
    //     console.log(this.$route.query.cid)
    //     console.log(this.$route.query)
    //     console.log(111111222222)
    if (this.$route.query.cid) {
      this.fenxiang = JSON.parse(this.$route.query.cid)
      //       console.log(321)
      //       console.log(this.fenxiang)
      //       console.log(321)
    }
    this.toov()
  },
  mounted () {
    this.$nextTick(() => {
      this.wxShare()
    })
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  components: {
    Icon,
    assemblelist,
    XProgress
  },
  methods: {
    wxShare () {
      let title = '快来一起拼课啦'
      let desc = '漫漫学习路，你我共进步。邀您共学低价精品课。'
      wxReady(title, desc, 'assembledetails', 'http://o6wndwjxn.qnssl.com/a046c201811301340249877.png',
        `&curriculum_id=${this.fenxiang.curriculum_id}&join_class_id=${this.fenxiang.join_class_id}`
      ).then(() => {
      })
    },
    yaoqing () {
      alert('分享给好友即可')
    },
    gobook () {
      this.$router.push({
        path: '/coursedetails',
        query: {
          curriculumId: this.fenxiang.curriculum_id
        }
      })
    },
    toov () {
      // 4505
      // this.user_id,
      let obj = {
        curriculum_id: this.fenxiang.curriculum_id,
        user_id: this.user_id,
        order_id: this.fenxiang.order_id
      }
      clickSuccess(obj).then(res => {
        this.$store.commit('updateLoadingStatus', {isLoading: false})
        if (res.data.code === 200) {
          this.curriculum = res.data.data.class
          this.parent = res.data.data
          this.is_list = res.data.data.is_list
          this.arrlist = []
          this.arrlist.push(res.data.data.list[0])
          this.baifenbi = res.data.data.list[0].count
          if (this.baifenbi == '1/2') {
            this.percent1 = 150 * 0.5
          } else {
            this.percent1 = 150 * 1
          }

          res.data.data.list.splice(0, 1)
          this.arrlistdel = res.data.data.list
          if (this.is_list === 'ing') {
            console.log(this.arrlist[0])
            this.countDown(this.arrlist[0].end_time)
          }
        }
      })
    },
    countDown (end) {
      let endTime = end
      let terval = setInterval(() => {
        let end = new Date(endTime * 1000) // 结束时间
        let start = new Date() // 当前时间
        let s = parseInt((end - start) / 1000) // 时间差
        let hour, minute, second
        if (s > 0) {
          hour = Math.floor(s / (60 * 60))
          minute = Math.floor(s / 60) - (hour * 60)
          second = Math.floor(s) - (hour * 60 * 60) - (minute * 60)
          if (hour <= 9) {
            hour = `0${hour}`
          }
          if (minute <= 9) {
            minute = `0${minute}`
          }
          if (second <= 9) {
            second = `0${second}`
          }
          this.time = `${hour}:${minute}:${second}`
          this.hour = hour
          this.minute = minute
          this.second = second
        } else {
          clearInterval(terval)
        }
        // element.surplus_people += 1
      }, 1000)
    },
    hide () {
      this.marskStatus = false
    }
  }
}
</script>

<style lang="less" scoped>
.htmlcontent{
  margin: 0 15px;
}
.bybars{
  width: 150px;
  height: 6px;
  border-radius: 5px;
  background-color: #EBEBEB;
  margin: 10px;
  position: relative;
  overflow: hidden;
  span{
    display: inline-block;
    height: 6px;
    position: absolute;
    background-color: #DA4131;
  }
}
.group-pushing {
  width: 100%;
  padding-bottom: 54px;
}
.process {
  width: 100%;
  height: 50px;
  padding: 12px 15px 5px 15px;
  box-sizing: border-box;
}
.radius {
  width: 26px;
  height: 26px;
  display: inline-block;
  border-radius: 50%;
  background-color: #DA4131;
  text-align: center;
  line-height: 26px;
  color: #fff;
  margin-right: 2px;
  margin-left: 2px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
}
.text {
  font-family: PingFangSC-Regular;
  font-size: 11px;
  display: inline-block;
  color: #666666;
  margin-left: 1px;
}
.text1 {
  font-family: PingFangSC-Regular;
  font-size: 11px;
  display: inline-block;
  color: #666666;
}
.disp {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.marsk {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.8);
  p {
    text-align: center;
    color: #ffffff;
    font-family: PingFangSC-Regular;
    font-size: 17px;
  }
  p {
    span {
      color: #DA4131;
    }
  }
  p:first-of-type {
    margin-top: 30%;
  }
  p:nth-of-type(2) {
    margin-top: 20px;
    margin-bottom: 37px;
  }
  div {
    width: 170px;
    height: 55px;
    border-radius: 7px;
    border: solid 1px #ffffff;
    margin: 0 auto;
    padding: 0px 10px;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    // span{
    //   color: #ff4141;
    // }
  }
}
.icon-jiantou {
  font-size: 15px;
  color: #DA4131;
}
.icon-gerenrenzheng {
  font-size: 29px;
  color: #DA4131;
}
.weui-icon-success {
  color: #DA4131;
  top: 2px;
  left: 23px;
}
.weui-icon-clear {
  color: #DA4131;
  font-size: 11px;
  bottom: 2px;
  left: 23px;
}
.icon-box {
  position: relative;
  height: 100%;
  width: 20px;
}
.line {
  height: 1px;
  width: 14px;
  display: inline-block;
  background-color: #DA4131;
}
.ovline {
  width: 1px;
  height: 18px;
  position: relative;
  background-color: #DA4131;
  right: -1px;
}
.box-line {
  width: 100%;
  height: 5px;
  background-color: #f8f8f8;
}
.ing-box {
  width: 100%;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: solid 1px #DA4131;
}
.success {
  font-size: 11px;
}
.clear {
}
.popoline {
  width: 14px;
  height: 1px;
  background-color: #DA4131;
  position: relative;
  right: -1px;
}
.obob {
  width: 25px;
  height: 100%;
  position: relative;
  .icon-jiantou:first-of-type {
    position: absolute;
    top: 0;
  }
  .icon-jiantou:last-of-type {
    position: absolute;
    bottom: 0;
  }
}
.ing-title {
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #333333;
  text-align: center;
}
.icon-zhengzaijinhang {
  font-size: 22px;
  color: #DA4131;
  display: inline-block;
  margin-right: 10px;
}
.bar-bar /deep/ .weui-progress__inner-bar {
  background-color: #DA4131;
  height: 6px;
  border-radius: 5px;
}
.bar-bar /deep/ .weui-progress__bar {
  height: 6px;
  border-radius: 5px;
}
.pepe {
  span {
    color: #DA4131;
    display: inline-block;
  }
  color: #999999;
  width: 100%;
  text-align: center;
  font-size: 13px;
}
.time-box {
  width: 100%;
  height: 75/2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: #DA4131;
  span {
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    display: inline-block;
    background-color: #DA4131;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    font-family: PingFangSC-Regular;
  }
}
.details {
  width: 100%;
  height: 32px;
  padding: 0 0 0 20px;
  box-sizing: border-box;
}
.details-title {
  width: 100%;
  height: 100%;
  // border-bottom: solid 1px #f8f8f8;
  display: flex;
  div:first-of-type {
    line-height: 32px;
    font-size: 18px;
    margin-right: 5px;
  }
  div:last-of-type {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #999999;
    line-height: 32px;
  }
}
.list-container {
  width: 100%;
  height: 60px;
  padding: 0 0 0 20px;
  box-sizing: border-box;
  .list-content {
    width: 100%;
    height: 100%;
    border-bottom: solid 1px #f8f8f8;
    display: flex;
  }
  .list-avatar {
    flex: 0 0 50px;
    position: relative;
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      overflow: hidden;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
    }
  }
  .list-text {
    flex: 1;
    position: relative;
    .who-name {
      height: 40px;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      font-size: 0px;
      .nonon {
        span:first-of-type {
          padding: 2px 4px;
          display: inline-block;
          background-color: #DA4131;
          border-radius: 4px;
          color: #fff;
          font-size: 9px;
          margin-right: 5px;
        }
        span:last-of-type {
          font-family: PingFangSC-Regular;
          font-size: 15px;
          color: #333333;
        }
      }
      .date {
        font-size: 0px;
        position: relative;
        bottom: -4px;
        span {
          color: #999999;
          font-size: 10px;
        }
      }
    }
  }
}
.list-box-bobo {
  padding-bottom: 10px;
}
.classjieshao {
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #333333;
  padding: 10px 20px;
}
.paddd {
  padding: 0 20px;
}
.brief-introduction {
  font-family: PingFangSC-Regular;
  font-size: 15px;
  color: #333333;
  padding-bottom: 10px;
}
.brief-content {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999999;
}
.buy {
  color: #333333;
  font-size: 18px;
  margin-top: 20px;
}
.buy-notice {
  font-size: 0px;
  padding-bottom: 20px;
  p {
    font-size: 12px;
    color: #999999;
    padding-top: 10px;
  }
}
.buton {
  position: fixed;
  bottom: 0px;
  width: 100%;
  right: 0;
  // background-color: #ffffff;
  z-index: 100;
  height: 54px;
  display: flex;
  box-sizing: border-box;
  padding: 7px 20px;
  align-items: center;
  justify-content: center;
  .btn-text {
    width: 100%;
    height: 100%;
    background-color: #DA4131;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 38px;
    font-family: PingFangSC-Regular;
    font-size: 16px;
  }
}
</style>
